<template>
  <div class="w-nav-bar">
    <x-header
      :right-options="{showMore: menus.length > 0}"
      :left-options="{showBack: back}"
      @on-click-title="titleClick"
      @on-click-more="actionsheetIsShow = true">
      {{ title }}
      <template slot="left">
        <slot name="left" />
      </template>
      <template slot="right">
        <slot name="right" />
      </template>
    </x-header>
    <actionsheet
      v-model="actionsheetIsShow"
      :menus="menus"
      @on-click-menu="actionsheetClick"
      show-cancel/>
  </div>
</template>

<script>
  import IconHome from '@/icons/home.svg'
  import { Actionsheet } from 'vux'
  import { XHeader } from 'vux'
  /**
   * 导航栏
   */
  export default {
    name: 'WNavBar',
    components: {
      IconHome,
      XHeader,
      Actionsheet
    },
    props: {
      /**
       * 标题
       */
      title: {
        default: '',
        type: String
      },
      /**
       * 返回文字
       */
      back: {
        default: true,
        type: Boolean
      },
      /**
       * 是否显示跳转到主页
       */
      moreHome: {
        default: true,
        type: Boolean
      },
      /**
       * 另外的按钮数组
       */
      moreBtns: {
        default() {
          return []
        },
        type: Array
      }
    },
    data() {
      return {
        /**
         * actionsheet是否显示
         */
        actionsheetIsShow: false
      }
    },
    computed: {
      /**
       * other 按钮数组
       */
      menus() {
        const arr = this.moreHome ? ['主页'] : []
        return arr.concat(this.moreBtns)
      }
    },
    methods: {
      titleClick() {
        this.$emit('titleClick')
      },
      /**
       * 更多按钮点击
       * @param item
       */
      actionsheetClick(item) {
        if (this.moreHome && item === 0) {
          this.$router.push ('/')
        }
        this.$emit('moreClick', item)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .w-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1001;
  }
</style>
